<template>
    <div class="site_box">
         <div class="header">
            <h4><router-link to="./home"><span class="iconfont">&#xe601; 返回</span></router-link>配置站点</h4>
        </div>
        <div class="main">
             <site-selector @ChangeSL="ChangeSiteLine"></site-selector>
            <div class="seletor">
                <button class="clearBtn" @click="clearClick">清除</button>
                <button class="packBtn" @click="SubmitClick">提交</button>
                <div class="box">
                    <el-form>
                        <el-form-item label="箱号配置: ">
                           <div class="bgbox">
                                <el-input placeholder="开始条码" class="packSite packSite1"></el-input>
                                <el-input placeholder="结束条码" class="packSite"></el-input>
                           </div>
                        </el-form-item>
                     </el-form>
                    <!-- <el-form ref="form" :model="sizeForm" label-width="83px" size="small">
                        <el-form-item label="箱号配置:">
                            <el-select v-model="sizeForm.model1" placeholder="开始条码">
                            <el-option label="0" value="0"></el-option>
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                            <el-option label="8" value="8"></el-option>
                            <el-option label="9" value="9"></el-option>
                            <el-option label="10" value="10"></el-option>
                            <el-option label="40" value="40"></el-option>
                            </el-select>
                            <el-select v-model="sizeForm.model2" placeholder="结束条码" style="margin-left:10px">
                            <el-option label="0" value="0"></el-option>
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                            <el-option label="8" value="8"></el-option>
                            <el-option label="9" value="9"></el-option>
                            <el-option label="10" value="10"></el-option>
                            <el-option label="40" value="40"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form> -->
                </div>
            </div>
            <div class="segment_box">
                <div class="segment" v-for="(item,index) in label" :key="item.id" :v-model="label"  :class="{'addclass':isActived === index,'handleCss':ishandle}" @click='onclick(item, (index+1))' >
                    <div class="line">
                        <p class="text">{{item.line_num}}</p>
                        <p>{{item.segment_num}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SiteSelector from './Selector/SiteSelector'
export default {
    name: 'Site',
    components: {
        SiteSelector
    },
    data() {
      return {
        sizeForm: {
          model: ''
        },
        label: [],
        isActived: false,
        onLine: '',
        onSegment: '',
        ishandle: false
      }; },
    methods: {
        clearClick () {
            alert('qingchucg')
        },
         ChangeSiteLine (data) {
            this.label = data;
            this.isActived = ''
        },
        SubmitClick () {
            this.$router.push({path:'/package',query: {line: this.onLine, segment: this.onSegment}})
        },
        onclick(item, index){
            this.isActived = index
            this.onLine = item.line_num
            this.onSegment = item.segment_num
            this.$emit('lineChange',item.line_num, item.segment_num)
        },
    }
}
</script>

<style scoped>
    .handleCss{
        pointer-events: none;
        background-color:#ccc;
    }
    .addclass {
        box-shadow: 3px 3px 4px #c9dbee;
        color: #409EFF;
    }
    .site_box{
        width: 100%;
        padding:0;
        margin:0;
    }
    .clearBtn{
        width: 70px;
        height: 30px;
        background-color: rgb(241, 82, 116);
        border: 1px solid rgb(241, 82, 116);
        color: #fff;
        border-radius: 4px;
        font-size: 1em;
        position: absolute;
        top: 134px;
        left: 0px;
        z-index: 999;
    }
    .packBtn{
        width: 70px;
        height: 30px;
        background-color: rgb(82, 165, 241);
        border: 1px solid rgb(41, 112, 179);
        color: #fff;
        border-radius: 4px;
        font-size: 1em;
        position: absolute;
        top: 134px;
        right: 0px;
        z-index: 999;
    }
    .bgbox{
        width: 100%;
        box-sizing: border-box;
        padding-right: 2px;
        padding-left: 86px;
    }
    .packSite{
        width: 49%;
        float: left;
        box-sizing: border-box;
    }
   .packSite1 {
         margin-right: 1.9%;
    }
    .header{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #2d3a4b;
        color: #fff;
        position:relative;
    }
     .header h4{
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 1.1rem;
     }
    .header h4 span{
        display: block;
        font-size: 0.9rem;
        position:absolute;
        top:0px;
        left: 10px;
        cursor: pointer;
        color: #fff;
    }
    .header h4 span:hover{
        color: rgb(169, 169, 177);
    }
    form{
        margin-top: 18px;
    }
    .segment_box{
        width: 100%;
        display:flex;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: 70px;
        vertical-align: center;
        box-sizing: border-box;
    }
    .segment{
        width: 31%;
        text-align: center;
        vertical-align: center;
        border: 1px solid #ccc;
        margin: 1.1%;
        cursor: pointer;
        box-sizing: border-box;
    }
    .el-select {
        box-sizing: border-box;
        width: 92%;
    }
     .line{
        min-width: 100%;
     }
     .text{
         font-weight: 800;
     }
     .segment:hover{
        box-shadow: 3px 3px 4px #c9dbee;
        color: #409EFF;
     }
    /* main */
    .main{
        width: 96%;
        margin: 0 auto;
        margin-top: 0px;
         position: relative;
    }
    .main .seletor>>>.el-input--small .el-input__inner {
        height: 38px;
        line-height: 38px;
    }
    .main .seletor{
        width: 100%;
        margin: 0 auto;
    }
    .main .seletor .box{
       width: 100%;
       margin: 0 auto;
       margin-bottom: -14px;
    }
    .main .seletor .el-select {
        width: 49%;
    }
</style>

